<template>
  <el-row style="height: 100%;background-color: #f3f4f9">
    <el-row style="height: 10%;border-bottom-style: solid;border-bottom-color: #e6e6e6;background-color: #ffffff">
      <Header></Header>
    </el-row>
    <el-row :gutter="20" style="height: 90%">
      <el-col :span="4" style="height: 100%;">
        <Navigator></Navigator>
      </el-col>
      <el-col :span="20" style="border-top: 1px solid #2c3e50;padding: 0;height: 100%">
        <el-row>
          <el-col :span="4">
            <h1>银行业务功能</h1>
          </el-col>
        </el-row>
        <el-row>
          <h3>处理用户提交请求</h3>
          <el-row>
            <el-col :span="20" :offset="2">
              <el-table :data="sendTableData" style="width: 100%">
                <el-table-column prop="tid" label="交易编号">
                </el-table-column>
                <el-table-column prop="sendAddress" label="发送用户地址">
                </el-table-column>
                <el-table-column prop="receiveAddress" label="接收用户地址">
                </el-table-column>
                <el-table-column prop="status" label="交易状态">
                </el-table-column>
                <el-table-column prop="balance" label="交易金额">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleSendTx(scope.$index, scope.row)">处理</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-row>

        <el-row>
          <h3>处理其他银行接收请求</h3>
          <el-row>
            <el-col :span="20" :offset="2">
              <el-table :data="receiveTableData" style="width: 100%">
                <el-table-column prop="tid" label="交易编号">
                </el-table-column>
                <el-table-column prop="sendAddress" label="发送用户地址">
                </el-table-column>
                <el-table-column prop="receiveAddress" label="接收用户地址">
                </el-table-column>
                <el-table-column prop="status" label="交易状态">
                </el-table-column>
                <el-table-column prop="balance" label="交易金额">
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="confirmTx(scope.$index, scope.row)">确认</el-button>
                    <el-button type="danger" size="mini" @click="rejectTx(scope.$index, scope.row)">拒绝</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-row>



      </el-col>
    </el-row>
  </el-row>
</template>
  
<script>

import Header from "@/components/Header";
import Navigator from "@/components/Navigator";

export default {
  components: { Header, Navigator },
  data() {
    return {
      sendTableData: [],
      receiveTableData: []
    }
  },
  mounted() {
    this.querySendTransactions();
    this.queryReceiveTransactions();
  },
  methods: {
    querySendTransactions() {
      let reqForm = {
        "address": this.$cookies.get("account_address")
      }
      this.axios.post("/query_bank_send_tx", reqForm).then((res) => {
        if (res.data.code == 200) {
          //请求成功
          this.sendTableData = res.data.data.send_tx
        } else {
          alert(`请求失败，原因为${res.data.data}`)
        }
      })
    },
    queryReceiveTransactions() {
      let reqForm = {
        "address": this.$cookies.get("account_address")
      }
      this.axios.post("/query_bank_receive_tx", reqForm).then((res) => {
        if (res.data.code == 200) {
          //请求成功
          this.receiveTableData = res.data.data.receive_tx
        } else {
          alert(`请求失败，原因为${res.data.data}`)
        }
      })
    },
    handleSendTx(index, rowData) {
      /**
       * 处理用户发送的请求，调用智能合约中bankFreezeUserAccount
      */
      console.log(index);
      console.log("*********");
      console.log(rowData)
      let postForm = {
        'address': rowData.sendAddress,
        'tid': rowData.tid
      }
      this.axios.post('/bank_freeze_and_send', postForm).then((res) => {
        if (res.data.code == 200) {
          //请求成功
          alert("操作成功！")
          this.querySendTransactions();
        } else {
          alert(`请求失败，原因为${res.data.data}`)
        }
      })
    },
    confirmTx(index, rowData) {
      console.log(index);
      console.log("*********");
      console.log(rowData)
      //调用智能合约中confirmTransaction，请求后端接口，通过后端接口调用
      let postForm = {
        'tid': rowData.tid
      }
      this.axios.post('/confirm_tx', postForm).then((res) => {
        if (res.data.code == 200) {
          //请求成功
          alert("操作成功！")
          this.queryReceiveTransactions();
        } else {
          alert(`请求失败，原因为${res.data.data}`)
        }
      })
    },
    rejectTx(index, rowData){
      console.log(index);
      console.log("*********");
      console.log(rowData)
      //调用智能合约中rejectTransaction，请求后端接口，通过后端接口调用
            //调用智能合约中confirmTransaction，请求后端接口，通过后端接口调用
      let postForm = {
        'tid': rowData.tid
      }
      this.axios.post('/reject_tx', postForm).then((res) => {
        if (res.data.code == 200) {
          //请求成功
          alert("操作成功！")
          this.queryReceiveTransactions();
        } else {
          alert(`请求失败，原因为${res.data.data}`)
        }
      })
    }

  }
}
</script>
  
<style scoped>
.container {
  height: 100%;
  width: 100%;
  position: fixed;
}

.aside {
  background-color: #545c64;
}

.main {
  background-color: #fff;
}

.form {
  width: 400px;
  margin: 0 auto;
}
</style>